import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
/**
 * Link/IndexLink 标签类似 html 中的 a 标签，用于链接到一个指定的页面；
 */
const ACTIVE = {color: 'red'};

<Link to="/" activeStyle={ACTIVE}>/</Link>

<Link to="/users/12" activeStyle={ACTIVE}>/users/12 </Link >

<Link to={{pathname: '/users/12', query: {foo: 'bar'}}} activeStyle={ACTIVE}>/users/12?foo=bar</Link>

/**
 * to 属性用于配置链接的目标地址，activeStyle 用于配置当当前路由就是 to 属性中配置的地址时，Link 标签的样式；
 * to 属性除了直接指定字符串之外，还可以指定成一个 js 对象，其中包含 pathname 和 query，分别表示路径和需要传递的参数；
 */

<Router history={browserHistory}>
<Route path="/" component={App}>
    <IndexRoute component={Index}/>
    <Route path="/about" component={About}/>
    <Route path="users" component={Users}>
        <IndexRoute component={UsersIndex}/>
        <Route path=":id" component={User}/>
    </Route>
</Route>
</Router>

/**
 * Route 表示一个路径配置，IndexRoute 表示当前路径下，如果未加载其它其它子组件，默认需要加载显示的组件；
 */
